import styled from './index.module.scss'
import {Table, Form, Space, Input, Radio, Select, Button, Popconfirm, message} from 'antd'
import type {ColProps} from 'antd'
import {codeAddress, codeTags, siteDefault, siteDelete, siteList, siteSave} from '@/api'
import {useEffect, useState} from 'react'
import {
	shippingAddressColumns,
	shippingAddressList,
	shippingAddressRules,
	shippingAddressSaveType
} from '@/pages/shippingAddress/index'
import useStateReducer from '@/hooks/useStateReducer'
import {addressList} from '@/type/componentType'

const {Option} = Select

const {Item, useForm} = Form

const {Group} = Radio

const labelCol:ColProps = {
	span: 3
}

const wrapperCol:ColProps = {
	offset: 1,
	span: 8
}

type initStateType = {
	province: addressList[]
	city: addressList[]
	district: addressList[]
	list: shippingAddressList[]
}

type ActionType = {
	type: 'province' | 'city' | 'district' | 'list',
	payload: Partial<initStateType>
}

const initState:initStateType = {
	province: [],
	city: [],
	district: [],
	list: []
}

const ShippingAddress = () => {
	const [tags, setTags] = useState<string[]>([])
	const [store, setStore] = useState<initStateType>(initState)
	const [form] = useForm<shippingAddressSaveType>()
	useEffect(() => {

		address()
		getList()
		codeTags().then(res => {
			if (res.code === 200){
				setTags(res.data)
			}
		})
		form.setFieldsValue({
			isDefault: '0',
			tag: '家'
		})
	}, [])

	function getList () {
		siteList().then(res =>{
			if (res.code === 200) {
				setStore(x => ({
					...x,
					list: res.data
				}))
			}
		})
	}

	function address () {
		codeAddress().then(res => {
			if (res.code === 200) {
				setStore(x => ({
					...x,
					province: res.data
				}))
			}
		})
	}

	// 保存
	const onFinish = (values:shippingAddressSaveType) => {
		siteSave(values).then(res => {
			if (res.code === 200) {
				const obj:shippingAddressSaveType = JSON.parse(JSON.stringify(values))
				let key: keyof shippingAddressSaveType
				for (key in obj) {
					obj[key] = ''
				}
				form.setFieldsValue({
					...obj,
					isDefault: '0',
					tag: '家'
				})
				getList()
			}
		})
	}
	// 获取市
	const provinceChange = (v) => {
		codeAddress({
			id: v
		}).then(res => {
			if (res.code === 200) {
				setStore(x => ({
					...x,
					city: res.data
				}))
			}
		})
	}
	// 获取区
	const cityChange = (v) => {
		codeAddress({
			id: v
		}).then(res => {
			if (res.code === 200) {
				setStore(x => ({
					...x,
					district: res.data
				}))
			}
		})
	}

	const addressForm = (
		<Form
			form={form}
			labelCol={labelCol}
			wrapperCol={wrapperCol}
			onFinish={onFinish}
		>
			<Item name="address_name" label={'收件人姓名'} rules={shippingAddressRules.address_name}>
				<Input></Input>
			</Item>
			<Item name="mobile" label={'联系电话'} rules={shippingAddressRules.mobile}>
				<Input></Input>
			</Item>
			<Item wrapperCol={{
				offset: 1,
				span: 18
			}} label={'地址'} required={true} style={{marginBottom: 0}}>
				<Space>
					<Item label={'省'} rules={shippingAddressRules.provinceId} name="provinceId">
						<Select
							onChange={provinceChange}
							style={{width: 100}}
						>
							{
								store.province.map(item => (
									<Option value={item.value} key={item.value}>{item.label}</Option>
								))
							}
						</Select>
					</Item>
					<Item label={'市'} rules={shippingAddressRules.cityId} name="cityId">
						<Select
							onChange={cityChange}
							style={{width: 100}}
						>
							{
								store.city.map(item => (
									<Option value={item.value} key={item.value}>{item.label}</Option>
								))
							}
						</Select>
					</Item>
					<Item label={'区'} rules={shippingAddressRules.districtId} name="districtId">
						<Select
							style={{width: 100}}
						>
							{
								store.district.map(item => (
									<Option value={item.value} key={item.value}>{item.label}</Option>
								))
							}
						</Select>
					</Item>
				</Space>
			</Item>
			<Item label={'详细地址'} rules={shippingAddressRules.remark} name="remark">
				<Input.TextArea></Input.TextArea>
			</Item>
			<Item label={'是否默认'} name="isDefault">
				<Group>
					<Radio value={'1'}>是</Radio>
					<Radio value={'0'}>否</Radio>
				</Group>
			</Item>
			<Item label={'标签'} rules={shippingAddressRules.tag} name="tag">
				<Group>
					{
						tags.map(item => (
							<Radio key={item} value={item}>{item}</Radio>
						))
					}
				</Group>
			</Item>
			<Item wrapperCol={{
				offset: 6
			}}>
				<Button htmlType={'submit'}>保存</Button>
			</Item>
		</Form>
	)

	const columnsJSX = (text: number, record:shippingAddressList) => {
		console.log(record)
		if (text === 0) {
			return (
				<Space>
					<Popconfirm
						title={'是否设为默认地址'}
						okText="是"
						cancelText="否"
						onConfirm={() => {
							siteDefault({
								id: record.id
							}).then(res =>{
								if (res.code === 200) {
									getList()
									message.success(res.message)
								}
							})
						}}
					>
						<Button type={'primary'}>设为默认地址</Button>
					</Popconfirm>
					<Popconfirm
						title={'是否删除当前收货地址'}
						okText="是"
						cancelText="否"
						onConfirm={() => {
							siteDelete({
								id: record.id
							}).then(res =>{
								if (res.code === 200) {
									getList()
									message.success(res.message)
								}
							})
						}}
					>
						<Button type={'primary'} danger>删除</Button>
					</Popconfirm>
				</Space>
			)
		}
		return (
			<Popconfirm
				title={'是否删除当前收货地址'}
				okText="是"
				cancelText="否"
				onConfirm={() => {
					siteDelete({
						id: record.id
					}).then(res =>{
						if (res.code === 200) {
							getList()
							message.success(res.message)
						}
					})
				}}
			>
				<Button type={'primary'} danger>删除</Button>
			</Popconfirm>
		)
	}

	// noinspection TypeScriptValidateTypes
	return (
		<div className={styled.shippingAddress}>
			<div className={styled.shippingAddress_header}>
				<span>收货地址</span>
				<span>
					<sup>*</sup>
					为必填项
				</span>
			</div>
			<div className={styled.shippingAddress_body}>
				<div>
					{addressForm}
				</div>
				<div className={styled.shippingAddress_body_table}>
					<Table
						rowKey={'address'}
						columns={shippingAddressColumns(columnsJSX)}
						bordered
						dataSource={store.list}
						size={'small'}
						pagination={false}
					></Table>
				</div>
			</div>
		</div>
	)
}

export default ShippingAddress
